
// xxx.vue


// Vue.component('组建的名字', { 组建的配置项 })
Vue.component('button-counter', {
  template: `<button :style="{background: bg}" @click="counterAdd">
        {{ text }} - {{ counter }}
        <br>
        {{ counter100 }}
        </button>`,
  data() {
    return {
      text: '按钮组件',
      counter: 0,
      // bg: 'red',
    }
  },
  props: ['bg'],
  methods: {
    counterAdd() {
      this.counter++
    }
  },
  computed: {
    counter100() {
      return this.counter * 100
    }
  },
  beforeCreate() {
    console.log('component beforeCreate')
  },
  beforeMount() {
    console.log('component beforeMount')
  },
  created() {
    console.log('component created')
  },
  mounted() {
    console.log('component mounted')
  },
})

const app = new Vue({
  data: {
    counter: 0,
    btnBg: [
      'red',
      'blue',
      'yellow',
      'green',
    ]
  },
  beforeCreate() {
    console.log('====== beforeCreate')
  },
  beforeMount() {
    console.log('====== beforeMount')
  },
  created() {
    console.log('====== created')
  },
  mounted() {
    console.log('====== mounted')
  },
  methods: {
    counterAdd() {
      this.counter++
    }
  }
}).$mount('#app')

/*

实例 beforeCreate
实例 created
实例 beforeMount
component beforeCreate
component created
component beforeMount
component mounted
实例 mounted

* */
